<template>
	<view v-if="visible" class="add-mp-tips" :style="{top: top + 'px', right: right + 'px'}">
		<view class="triangle-wrapper">
			<view class="triangle-up"></view>
		</view>
		<view class="content">
			点击
			<image class="img-dot" src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_tubiao@2x.png"></image>
			, 添加至我的小程序
			<image @click="visible = false" class="img-close" src="https://7463-tcb-zoumbaexjdidjmj2ff212-5d3479-1303238310.tcb.qcloud.la/static/img/ic_cuowu@2x.png"></image>
		</view>
	</view>
</template>

<script>
	export default {
		name:"add-mp-tips",
		data() {
			return {
				visible: true,
				top: 0,
				right: 0
			};
		},
		created() {
			// #ifdef MP
			let sysInfo = uni.getSystemInfoSync()
			let rect = uni.getMenuButtonBoundingClientRect()
			console.log(rect)
			this.top = rect.bottom + uni.upx2px(10)
			this.right = sysInfo.windowWidth - rect.left - uni.upx2px(85 + 55)
			// #endif
		}
	}
</script>

<style scoped>
	.add-mp-tips {
		position: fixed;
		z-index: 998;
		top: 0;
	}
	.content {
		background-color: rgba(0, 0, 0, 0.6);
		color: #FFFFFF;
		display: flex;
		flex-direction: row;
		align-items: center;
		height: 50rpx;
		padding: 0 14rpx;
		border-radius: 25rpx;
	}
	view {
		font-size: 22rpx;
	}
	.img-dot {
		width: 57rpx;
		height: 16rpx;
		vertical-align: bottom;
	}
	.img-close {
		width: 22rpx;
		height: 22rpx;
		vertical-align: bottom;
		margin-left: 7rpx;
	}
	.triangle-wrapper {
		position: relative;
		height: 16rpx;
	}
	.triangle-up {
		position: absolute;
		right: 85rpx;
	    width: 0;
	    height: 0;
	    border-left: 16rpx solid transparent;
	    border-right: 16rpx solid transparent;
	    border-bottom: 16rpx solid rgba(0, 0, 0, 0.6);
	}
</style>
